<template>
	<view class="weather-container">

		<view v-for="(day, index) in daily" :key="index" class="weather-item">
			<view class="date">{{ day.fxDate }}</view>
			<view class="weather">
				<view class="sunrise-sunset">
					日出：{{ day.sunrise }}，日落：{{ day.sunset }}
				</view>
				<view class="moon-info">
					月相：{{ day.moonPhase }}，月升：{{ day.moonrise }}，月落：{{ day.moonset }}
				</view>
				<view class="temp">
					最高温度：{{ day.tempMax }}°C，最低温度：{{ day.tempMin }}°C
				</view>
				<view class="weather-condition">
					白天：{{ day.textDay }}，夜间：{{ day.textNight }}
				</view>
				<view class="wind-info">
					风向：{{ day.windDirDay }}，风力：{{ day.windScaleDay }}，风速：{{ day.windSpeedDay }}km/h
				</view>
				<view class="other-info">
					湿度：{{ day.humidity }}%，气压：{{ day.pressure }}hPa，能见度：{{ day.vis }}km，云量：{{ day.cloud }}%
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		userStore
	} from '../../store/userStore';
	import {
		CONFIG
	} from '../../utils/config'

	onLoad(() => {
		getWeather()
	})



	let daily = ref([])
	async function getWeather() {
		let res = await uni.$get(CONFIG.hefeng_7day, {
			key: CONFIG.hefeng_key,
			location: CONFIG.hefeng_location
		})
		console.log(res)
		daily.value = res.daily
		console.log(daily.value)
	}
	uni.setNavigationBarTitle({
		title: "天气预报",
	});
</script>

<style scoped>
	/* 容器样式 */
	.weather-container {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 800px;
		margin: 0 auto;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	/* 天气卡片样式 */
	.weather-item {
		padding: 20px 0;
		border-bottom: 1px solid #eaeaea;
	}

	.weather-item:last-child {
		border-bottom: none;
	}

	/* 日期标题样式 */
	.date {
		font-size: 18px;
		color: #333;
		font-weight: 500;
		margin-bottom: 10px;
	}

	/* 天气详情容器 */
	.weather {
		font-size: 16px;
		color: #666;
	}

	/* 子标题样式 */
	.sunrise-sunset,
	.moon-info,
	.temp,
	.weather-condition,
	.wind-info,
	.other-info {
		margin-bottom: 8px;
	}

	/* 响应式设计 */
	@media (max-width: 768px) {
		.weather-container {
			padding: 15px;
		}

		.date {
			font-size: 16px;
		}

		.weather {
			font-size: 14px;
		}
	}
</style>